
<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="info">
      <b-navbar-brand href="#">CCU</b-navbar-brand>
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" is-nav>
        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <ul class="nav navbar-nav navbar-right" >
            <div class="mt-3">
              <b-button-group>
                <b-button variant="success" v-on:click="btnClicklogin">登录</b-button>
                <b-button variant="warning" v-on:click="btnClickregistered">注册</b-button>
              </b-button-group>
            </div>

          </ul>
        </b-navbar-nav>
      </b-collapse>

    </b-navbar>
  <div class="container" style="margin: 100px 33%;">
    <div class="col-md-4 col-md-offset-4 m-1">

            <form class='form-login' action="/login/" method="post">

              <input type="hidden" name="csrfmiddlewaretoken" value="H4zzSGoXtgDsJlPsi0GLE4kfz9Td1H1NDCsTNNT400Dov0bvJuYPenYjDdPdDmqD">

              <div class="form-group">
                <label for="id_username" style="float: left">用户名:</label>
                <input type="text" v-model="form.name" name="username" class="form-control" maxlength="128" required id="id_username">
              </div>
              <div class="form-group">
                <label for="id_password1" style="float:left;">密码:</label>
                <input type="password"  v-model="form.passwd" name="password" class="form-control" maxlength="256" required id="id_password1">
              </div>

              <div class="form-group" v-if="showregistered">
                <label for="id_password2" style="float:left;">确认密码:</label>
                <input type="password"  v-model="form.passwd_vri" name="password" class="form-control" maxlength="256" required id="id_password2">
              </div>

              <div class="form-group" v-if="showregistered">
                <label for="id_password" style="float:left;">邮箱地址:</label>
                <input type="password"  v-model="form.email" name="password" class="form-control" maxlength="256" required id="id_password">
              </div>

              <div class="form-group">

                <label for="id_captcha_1">验证码:</label>
                <img src="/captchaimage/bc80045853b73802525a34d3bf8b8062e7c09ec7/" alt="captcha" class="captcha" />
                <input type="hidden" name="captcha_0" v-model="form.vercode" required id="id_captcha_0"><input type="text" name="captcha_1" required id="id_captcha_1" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false">
              </div>
              <button v-on:click="onReset" class="btn btn-default pull-left">重置</button>

              <b-button @click="showDismissibleAlert" variant="info" class="m-1">
                提交
              </b-button>
            </form>
    </div>
  </div>
  </div>

</template>
<script>
  export default {
    data() {
      return {
        showregistered:false,
        form: {
          name: '',
          passwd: '',
          vercode: "",
          passwd_vri:"",
          email:""
        }
      }
    },
    methods: {
      onSubmit(evt) {
        evt.preventDefault()
        alert(JSON.stringify(this.form))
      },
      btnClicklogin:function(){
        // window.location.reload();
        this.$router.replace('/login')
        this.showregistered = false;
      },
      showDismissibleAlert:function(){
        var fromdate ={};
        fromdate.name= this.form.name;
        fromdate.passwd= this.form.passwd;
        fromdate.vercode= this.form.vercode;
        fromdate.passwd_vri= this.form.passwd_vri;
        fromdate.email= this.form.email;
        this.$fetch('/api/v2/movie/top250')
          .then((response) => {
            debugger;
            console.log(response)
          })
      },
      btnClickregistered:function(){
        // window.location="/registered"
        this.$router.replace('/registered')
        this.showregistered = true;
      },
      onReset(evt) {
        evt.preventDefault()
        this.form.name = ''
        this.form.passwd = ''
        this.form.vercode = ""
        this.form.passwd_vri = ""
        this.form.email=""
      }
    }
  }
</script>

<style scoped>
  @import '../css/index.css';
</style>
